<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="任务状态">
        <!-- <el-radio-group v-model="status" @change="changeStatusMethod">
          <el-radio-button :label="100">全部： {{amount}}</el-radio-button>
          <el-radio-button :label="1">运行中： {{runningCount}}</el-radio-button>
          <el-radio-button :label="2">已停止： {{stopCount}}</el-radio-button>
          <el-radio-button :label="0">待处理： {{waitingCount}}</el-radio-button>
          <el-radio-button :label="-1">已完成： {{successCount}}</el-radio-button>
        </el-radio-group> -->
        <el-radio-group v-model="status" @change="changeStatusMethod">
          <el-radio :label="100">
            <el-tag type="info">全部： {{amount}}</el-tag>
          </el-radio>
          <el-radio :label="1">
            <el-tag>运行中： {{runningCount}}</el-tag>
          </el-radio>
          <el-radio :label="2">
            <el-tag type="danger">已停止： {{stopCount}}</el-tag>
          </el-radio>
          <el-radio :label="0">
            <el-tag type="warning">待处理： {{waitingCount}}</el-tag>
          </el-radio>
          <el-radio :label="-1">
            <el-tag type="success">已完成： {{successCount}}</el-tag>
          </el-radio>
        </el-radio-group>
        <!-- <div>
          <el-tag type="info" class="count-tag">全部： {{amount}}</el-tag>
          <el-tag class="count-tag">运行中： {{runningCount}}</el-tag>
          <el-tag type="danger" class="count-tag">已停止： {{stopCount}}</el-tag>
          <el-tag type="warning" class="count-tag">待处理： {{waitingCount}}</el-tag>
          <el-tag type="success" class="count-tag">已完成： {{successCount}}</el-tag>
        </div> -->
      </el-form-item>
      <el-form-item label="间隔时间">
        <el-input-number v-model="interval" size="mini" @change="intervalChangeMethod" :min="1" :max="10"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button v-show="!isrunning" type="primary" @click="startTaskMethod('all')">开始任务</el-button>
        <el-button v-show="isrunning" type="primary" icon="el-icon-loading"></el-button>
      </el-form-item>
    </el-form>
    <!-- <div>
      <el-tag type="info" class="count-tag">总数： {{amount}}</el-tag>
      <el-tag class="count-tag">运行中： {{runningCount}}</el-tag>
      <el-tag type="danger" class="count-tag">已停止： {{stopCount}}</el-tag>
      <el-tag type="warning" class="count-tag">待处理： {{waitingCount}}</el-tag>
      <el-tag type="success" class="count-tag">已完成： {{successCount}}</el-tag>
    </div> -->
    <el-table :data="list" :default-expand-all="true" height="640" border style="width: 100%;margin-top: 10px;">
      <el-table-column type="expand">
        <template slot-scope="{row}">
          <span v-html="JSON.stringify(row, '<br>', 5)"></span>
          <!-- <el-form label-position="left" inline>
            <el-form-item v-for="($val, $key) in row" :label="$key" :key="$key">
              <span>{{ $val }}</span>
            </el-form-item>
          </el-form> -->
        </template>
      </el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="task_name" label="任务名称"></el-table-column>
      <!-- <el-table-column prop="pid" label="PID" width="80"></el-table-column> -->
      <el-table-column prop="num" label="当前数" width="80"></el-table-column>
      <el-table-column prop="total" label="总数" width="80"></el-table-column>
      <el-table-column prop="start_time" label="开始时间"></el-table-column>
      <el-table-column prop="modify_time" label="更新时间"></el-table-column>
      <el-table-column label="进度">
        <template slot-scope="{row}">
          <el-progress :percentage="row.status == -1 ? 100 : parseInt(((row.num || 0) / (row.total || 1)) * 100)" :status="statusMethod(row.status)"></el-progress>
          <!-- <el-progress :percentage="100" status="success"></el-progress> -->
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="{row,$index}">
          <el-button v-show="row.status == 0 || row.status == 2" type="warning" icon="el-icon-caret-right" @click="startTaskMethod($index, row)" circle></el-button>
          <el-button v-show="row.status == 1" type="primary" icon="el-icon-loading" circle></el-button>
          <el-button v-show="row.status == -1" type="success" icon="el-icon-check" circle></el-button>
          <!-- <el-button v-show="row.status == 1" type="primary" icon="el-icon-circle-close" @click="startTaskMethod($index, row)" circle></el-button> -->
          <!-- <el-button size="mini" type="danger" @click="startTaskMethod($index, row)">停止</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="total, prev, pager, next, jumper" :total="total" :page-size="ps" @current-change="listMethod">
    </el-pagination>
  </div>
</template>
<script>
import apis from "@utils/apis";

export default {
  data() {
    return {
      pn: 1,
      ps: 10,
      total: 0,
      list: [],
      source: '',
      _type_: '',
      cateId: '',
      typeId: '',
      status: 1, // 100: 全部 -1: 完成 0: 待处理 1: 运行中 2: 已停止
      interval: 3,
      intervalId: '',
      isrunning: false,
      amount: 0,
      runningCount: 0,
      stopCount: 0,
      successCount: 0,
      waitingCount: 0,
    }
  },

  computed: {

  },

  components: {

  },

  beforeRouteUpdate(to, from, next) {
    let {
      params,
    } = to
    this.cateId = params.cateId
    this.typeId = params.typeId
    if (this.intervalId)
      clearInterval(this.intervalId)
    this.initParams()
    this.listMethod()
    next()
  },

  beforeRouteLeave(to, from, next) {
    if (this.intervalId)
      clearInterval(this.intervalId)
    this.initParams()
    next()
  },

  mounted() {
    this.cateId = this.$route.params.cateId
    this.typeId = this.$route.params.typeId
    this.listMethod()
  },

  methods: {
    initParams() {
      this.pn = 1
      this.ps = 10
      this.status = 1
      this.interval = 3
    },

    listMethod(page) {
      if (parseInt(page) > 0)
        this.pn = page
      if (this.intervalId)
        clearInterval(this.intervalId)
      let loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.intervalId = setInterval(() => {
        apis.taskListApi({
          cateId: this.cateId,
          typeId: this.typeId,
          status: this.status,
          pn: this.pn,
          ps: this.ps,
        }).then(res => {
          loading.close();
          this.list.splice(0, this.list.length)
          this.list.push(...res.result.docs)
          // this.list = res.result.docs
          this.total = res.result.total
          this.isrunning = res.result.isrunning
          this.runningCount = res.result.runningCount
          this.stopCount = res.result.stopCount
          this.successCount = res.result.successCount
          this.waitingCount = res.result.waitingCount
          this.amount = res.result.amount
        })
      }, this.interval * 1000)
    },

    intervalChangeMethod(value) {
      this.interval = value
      if (this.intervalId)
        clearInterval(this.intervalId)
      this.listMethod()
    },

    changeStatusMethod() {
      this.listMethod(1)
    },

    startTaskMethod(idx, row) {
      let params = {
        cateId: this.cateId,
        typeId: this.typeId,
      }
      if (row && (row.status == 0 || row.status == 2)) {
        params._id = row._id
        params.status = row.status
      }
      apis.startTaskApi(params).then(result => {
        this.listMethod()
      })
    },

    statusMethod(status) {
      switch (status) {
        case -1:
          return 'success';
        case 2:
          return 'exception';
        default:
          return '';
      }
    },

  }
}

</script>
<style>

</style>
